<template>
    <div class="imageContainer">
        <el-image :src="propJson.imageUrl" :fit="propJson.imageFit"
                :z-index="100" :style="execStyle"/>
    </div>
</template>

<script>
export default {
    name: "ImageComponent",
    props: ['propJson', 'commonParam'],
    computed: {
        execStyle() {
            let resStyle = "";
            if (this.propJson.imageHeight) {
                resStyle += "height: " + this.propJson.imageHeight + ";";
            }
            if (this.propJson.imageWidth) {
                resStyle += "width: " + this.propJson.imageWidth + ";";
            }
            return resStyle;
        }
    }
}
</script>

<style scoped lang="less">
.imageContainer {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>